<template>
  <div id="components-dropdown-demo-placement">
    <div
      class="icon-wrapper base-btn"
      @click="handleQrcode(false)"
    >
      <BaseSvgIcon
        class="icon-item"
        icon="minWx"
        color="red"
      />
    </div>
    <div
      class="icon-wrapper base-btn"
      @click="handleQrcode(true)"
    >
      <BaseSvgIcon
        class="icon-item"
        icon="app"
        color="red"
      />
    </div>
    <slot name="message"></slot>
    <div style="border-left: 1px solid white; height: 30px; margin: 0 10px;"></div>
    <template>
      <a-dropdown placement="bottomRight">
        <div>
          <div class="icon-wrapper">
            <BaseSvgIcon
              style="margin-right: 0"
              class="icon-item"
              icon="user"
              color="red"
            />
          </div>
          <!--                     <ellipsis :length="15" :useTitle="true">{{ name }}</ellipsis>-->
          <span
            :title="name"
            style="max-width: 60px;
            margin-left: 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;"
          >{{ name }}</span>
        </div>
        <a-menu
          slot="overlay"
          class="downContent"
        >
          <a-menu-item @click="handlePassword">
            <span>修改密码</span>
          </a-menu-item>
          <a-menu-item @click="handleModifyAccount">
            <span>修改账号</span>
          </a-menu-item>
          <!-- <a-menu-item @click="handleOut">
            <span>退出</span>
          </a-menu-item> -->
        </a-menu>
      </a-dropdown>
      <div
        class="postName-left"
        @click="isOperationalGuideline = true"
      >
        <Ellipsis
          :length="8"
          tooltip
        >{{postName}}</Ellipsis>
      </div>
    </template>
    <modalPsw
      :visible="GET_PWD"
      @handleCancel="handleCancelPsw"
    ></modalPsw>
    <modifyAccount
      :visible="GET_ACCOUNT"
      @handleCancel="cancelModifyAccount"
    ></modifyAccount>
    <BaseModal
      :visible="visible.isQrcode"
      width="650px"
      :title="showApp ? 'app下载二维码' : '微信扫码打开小程序'"
      @cancel="visible.isQrcode = false"
      :footer="null"
    >
      <div
        class="qrcode-wrapper"
        v-if="showApp"
      >
        <div class="code-container">
          <div class="code-item code-left">
            <VueQrcode
              :value="appDownloadUrl"
              :options="{ width: 250 }"
            ></VueQrcode>
            <span class="code-tips">Android安装包</span>
          </div>
<!--          <div class="code-item code-right">-->
<!--            <VueQrcode-->
<!--              :value="iosDownloadUrl"-->
<!--              :options="{ width: 250 }"-->
<!--            ></VueQrcode>-->
<!--            <span class="code-tips">IOS安装包</span>-->
<!--          </div>-->
        </div>
<!--        <span class="tip-text">注：扫描二维码，即可下载APP（1.请使用手机浏览器扫描，勿用微信扫描；2.如是苹果手机，请下载后，到手机设置-通用-设备管理页面信任此应用后，方可进行使用）</span>-->
        <span class="tip-text">注：请使用手机自带浏览器，扫描二维码，进行<b style="color: red">普通下载</b>（1.勿用微信扫描；2.如果是苹果手机，请联系流程与数智管理部(樊麟)获取兑换码，至APP Store兑换下载）</span>
      </div>
      <div
        class="minQrcode-wrapper"
        v-else
      >
        <img
          src="~@/assets/indexPage/minQrcode.jpg"
          alt=""
        />
      </div>
    </BaseModal>
    <OperationalGuidelineView
      v-if="isOperationalGuideline"
      @click="dialogFn"
    />
  </div>
</template>

<script>
import { appDownloadUrl, iosDownloadUrl } from '@/config'
import BaseModal from '@/components/BaseModal'
import Vue from 'vue'
import modalPsw from './modalPsw' // 重置密码
import modifyAccount from './modifyAccount' // 重置密码
import VueQrcode from '@chenfengyuan/vue-qrcode'
// import BaseSvgIcon from '@/components/BaseSvgIcon'
import { getModifyEmployeeInfo } from '@/api/login'
import { Ellipsis } from '@/components'
import OperationalGuidelineView from './OperationalGuidelineView.vue' // 操作指引查看
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'AvatarDown',
  data() {
    return {
      showApp: true,
      iosDownloadUrl: iosDownloadUrl,
      appDownloadUrl: appDownloadUrl,
      name: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
      postId: JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost.postId, // 岗位编号
      //密码重置
      // psw: {
      //   visible: false
      // },
      loading: {
        isLogout: false
      },
      visible: {
        isQrcode: false
      },
      // modifyAccountVisible:false,
      isOperationalGuideline: false // 操作指引弹窗显示参数
    }
  },
  components: {
    modalPsw,
    BaseModal,
    VueQrcode,
    Ellipsis,
    modifyAccount,
    OperationalGuidelineView
  },
  computed: {
    ...mapGetters(['GET_PWD', 'GET_ACCOUNT']),
    userInfo() {
      console.log(Vue.getAcloudProvider().getUserInfo(),'Vue.getAcloudProvider().getUserInfo()')
      return Vue.getAcloudProvider().getUserInfo()
    },
    postName() {
      
      let postsArr = JSON.parse(sessionStorage.getItem('postsList')) || []
      let postsObj = postsArr.find((item) => item.id === this.postId)
      let pname = postsObj?.pname.split('/')
      console.log(postsArr,postsObj,pname,'121312311123132')
      if (pname.length) {
        return pname[pname.length - 1]
      }
    }
    
  },
  methods: {
    ...mapActions(['pwdVisible', 'accountVisible', 'clearOrgLabel']),
    handleQrcode(flag = true) {
      this.showApp = flag
      this.visible.isQrcode = true
    },
    handleOut() {
      if (this.loading.isLogout) {
        this.$message.info('退出中...')
        return
      }
      this.loading.isLogout = true
      Vue.getAcloudProvider().logout()
      // 删除组织标签存储
      this.clearOrgLabel()
      this.$store.commit('SET_ACTIVE_CODES', [])
      this.loading.isLogout = false
    },
    handlePassword() {
      // this.psw.visible = true
      this.pwdVisible(true)
    },
    async handleModifyAccount() {
      let { data } = await getModifyEmployeeInfo({ userId: this.userInfo.id })
      console.log(data.username, this.userInfo?.username, data.username != this.userInfo?.username)
      if (data.username != this.userInfo?.username) {
        this.$message.warning('你的账号发生变化，需要登录新的账号')
        setTimeout(() => {
          localStorage.removeItem('ycloud-user_info')
          Vue.getAcloudProvider().logout()
        }, 2000)
      }

      //  this.modifyAccountVisible = true;
      this.accountVisible(true)
    },
    cancelModifyAccount(val) {
      //  this.modifyAccountVisible = val;
      this.accountVisible(val)
    },
    handleCancelPsw(val) {
      // this.psw.visible = val
      this.pwdVisible(val)
    },

    // 弹窗回调
    dialogFn(obj) {
      // console.log('567890', obj);
      this.isOperationalGuideline = false
    }
  }
}
</script>
<style lang="less" scoped>
.minQrcode-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper {
  display: flex;
  align-items: center;
}

.icon-item {
  font-size: 26px;
  margin-right: 12px;
}

.avatar-wrapper {
  margin-right: 0;
  width: 32px;
  height: 32px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .icon-img {
    width: 18px;
    height: 18px;
  }
}
</style>
<style lang="less" type="text/less">
.qrcode-wrapper {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .code-container {
    display: flex;

    .code-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
    }

    .code-left {
      margin-right: 20px;
    }
  }
}

#components-dropdown-demo-placement {
  position: relative;
  z-index: 999;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .ant-dropdown-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;

    .headerName {
      margin-left: 5px;
      line-height: 18px;
      word-wrap: break-word;
      max-width: 110px;
    }
  }
}

.downContent {
  line-height: 40px;
  text-align: center;
}

.postName-left {
  margin-left: 12px;
}
</style>